<template>
  <div style="height: 40px">
    <div class="header1">
      <div class="header1-1">
        <el-button type="text">小米商城</el-button>
        <el-button type="text">MUI</el-button>
        <el-button type="text">云服务</el-button>
        <el-button type="text">协议规则</el-button>
        <el-button type="text">协议规则</el-button>
      </div>

      <div class="header2">
        <el-button type="text"  v-if="Username">{{
          this.Username
        }}</el-button>
        <el-button
          type="text"

          @click="$router.push('/Load')"
          v-if="!Username"
          >登录</el-button
        >
        <el-button
          type="text"

          @click="$router.push('/Load')"
          v-if="!Username"
          >注册</el-button
        >
        <el-button class="butten1" icon="el-icon-shopping-cart-2"
           @click="$router.push('/CommInfo')">购物车(2)</el-button
        >
      </div>
    </div>
    <div>
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Username: "",
    };
  },
  created() {
    this.Username = sessionStorage.getItem("Username");
  },
};
</script>

<style scoped>
.header1 {
  height: 40px;
  background-color: #333333;
  color: #b0b0b0;
  line-height: 30px;
  margin: -8px;
}
.header1-1 {
  margin-left: 150px;
}
.el-button {
  float: left;
  font-size: 14px;
  margin-right: 15px;
  color: #b0b0b0;
}
.butten1 {
  float: right;
  margin-right: 150px;
  background-color: #424242;
  border: 0;
  height: 40px;
  width: 130px;
  font-size: 15px;
}
.header2 {
  float: right;
}
</style>
